<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=2.0,user-scalable=yes"/>
    <title>PDF查看</title>
    <style type="text/css">
        canvas {
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }
        .box{
            position:fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top:0;
            background-color: rgba(0,0,0,.1);
        }
        .out-progress {
            width: 95%;
            height: 10px;
            border-radius: 4px;
            background-color: lightgray;
            position: absolute;
            top: 2px;
            left: 50%;
            transform:translateX(-50%);
        }
        #progress{
            width: 0%; height: 100%; 
            border-radius: 4px;
            background-color: #409eff;
            transition: all 0.5s ease-in-out;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.min.js"></script>
</head>
<body>
<div class="box" id="box">
    <div class="out-progress">
        <div id="progress"></div>
    </div>
</div>
<script type="text/javascript" src="show_pdf.js"></script>
</body>
</html>